<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>微博列表页面</h1>
    <div v-for="weibo in arr">
        <h3>{{weibo.content}}</h3>
        <p>{{weibo.url}}</p>
        <!--f:/files/2023/04/23/xxxx.jpg  若直接写成这种则是在客户端电脑上查找-->
        <!--http://localhost:8080/2023/04/23/xxxx.jpg  :src="weibo.url"写法其实就是查找的此地址，要配置静态资源才能访问到-->
        <img :src="weibo.url" width="100">
        <a href="javascript:void(0)" @click="del(weibo.id)">删除</a>
    </div>
</div>


<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            arr: []
        },
        methods: {
            del(id) {
                if (confirm("确认删除此微博吗?")) {
                    axios.post("/delete?id=" + id).then(function (response) {
                        alert("删除成功!");
                        location.reload();
                    })
                }
                ;
            }
        },
        created: function () {
            axios.get("/select").then(function (response) {
                v.arr = response.data;

            })
        }
    })
</script>
</body>
</html>